<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>登录网关</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			html,
			body {
				height: 100%;
			}

			body {
				display: flex;
				justify-content: center;
				align-items: center;
				background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
			}

			.login {
				width: 400px;
				height: 300px;
				background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
				border-radius: 8px;
				position: relative;
			}

			.login h1 {
				height: 38px;
				width: 93%;
				background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
				line-height: 38px;
				font-size: 30px;
				text-align: center;
				border-radius: 5px;
				margin: 15px auto;
			}

			.login-form {
				width: 60%;
				margin: 0 auto;
			}

			.login-form form input {
				width: 220px;
				height: 30px;
				outline: none;
				margin: 10px auto;
				border-radius: 5px;
			}

			.button {
				line-height: 30px;
				height: 30px;
				width: 70px;
				color: #ffffff;
				background-color: #4a8cf7;
				font-size: 16px;
				font-weight: normal;
				font-family: Arial;
				border: 0px solid #dcdcdc;
				border-radius: 3px;
				text-align: center;
				display: inline-block;
				text-decoration: none;
				cursor: pointer;
			}

			.button:hover {
				background-color: #446bf7;
			}

			.footer {
				position: fixed;
				bottom: 0;
				height: 50px;
				font-size: 12px;
				text-align: center;
				font-family: "宋体";
			}
			
			.error-message {
				color: #ff3333;
				text-align: center;
				margin-top: 10px;
				font-size: 14px;
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="login">
			<h1>边缘计算网关</h1>
			<div class="login-form">
				<form id="loginForm">
					<input type="text" name="username" id="usr" value="" placeholder="请输入用户名" />
					<input type="password" name="password" id="pwd" value="" placeholder="请输入密码" />
					<input type="button" class="button" value="登    录" onclick="login()" />
				</form>
				<div class="error-message" id="errorMsg"></div>
			</div>
		</div>
		<div class="footer">
			联系电话: 400-706-1880 &nbsp 技术支持QQ: 1075518044<br>
			开发商：华清远见济南研发中心 <a href="http://www.farsight.com.cn" target="_blank"><b>边缘计算网关B/S版</b></a>
		</div>
		
		<script>
			function login() {
				const username = document.getElementById('usr').value;
				const password = document.getElementById('pwd').value;
				const errorMsg = document.getElementById('errorMsg');
				
				if(!username || !password) {
					errorMsg.textContent = "用户名和密码不能为空";
					return;
				}
				
				fetch('http://localhost:8080/login', {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
					},
					body: JSON.stringify({username, password})
				})
				.then(response => {
					if (!response.ok) {
						throw new Error('Network response was not ok');
					}
					return response.json();
				})
				.then(data => {
					if(data.success) {
						window.location.href = 'http://localhost:8081/index.html';
					} else {
						errorMsg.textContent = data.message || "登录失败";
					}
				})
				.catch(error => {
					console.error('Error:', error);
					errorMsg.textContent = "网络错误，请检查后端服务是否运行";
				});
			}
		</script>
	</body>
</html>